﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/knockout-2.1.0.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager runat="server">
    </asp:ScriptManager>
    <div>
        <asp:Panel runat="server" ID="UserPanel">
            <p>
                <span>User name:</span><asp:TextBox runat="server" ID="Username" data-bind="value:Username"></asp:TextBox></p>
            <p>
                <span>First name:</span><asp:TextBox runat="server" ID="FirstName" data-bind="value:FirstName"></asp:TextBox></p>
            <p>
                <span>last name:</span><asp:TextBox runat="server" ID="LastName" data-bind="value:LastName"></asp:TextBox></p>
            
            <p><span>Enabled:</span><asp:CheckBox runat="server" ID="cbEnabled"></asp:CheckBox></p>
            
            <table data-bind="style:{display: Enabled() ? 'block' : 'none'}">
                <thead>
                    <tr>
                        <th>
                            First name
                        </th>
                        <th>
                            Last name
                        </th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: Childrens">
                    <tr>
                        <td data-bind="text: FirstName">
                        </td>
                        <td data-bind="text: LastName">
                        </td>
                    </tr>
                </tbody>
            </table>
        </asp:Panel>
        <input type="button" data-bind="click: save" value="Save"/>
    </div>
    </form>
    <script type="text/javascript">
        $().ready(function() {
            viewModel = <%=ViewModel %>;
            viewModel.save = function() {
                $.ajax({
                    url: location.href,
                    data: ko.toJSON(viewModel),
                    success: function(data) {
                        alert(data);
                    }
                });
            };
            ko.applyBindings(viewModel);
        });
    </script>
</body>
</html>
